<template>
  <div
    v-empty="!collectionReadAuth"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-tab">
    <flexbox justify="flex-end">
      <el-button
        v-if="detailData.state == 3 && collectionSaveAuth"
        type="primary"
        size="mini"
        icon="el-icon-plus"
        class="xr-btn--orange"
        @click="handleCreateCollection">
        新增回款
      </el-button>
    </flexbox>

    <tab-table
      v-if="showTable && collectionReadAuth"
      :request-config="tabTableRequest"
      class="table-list"
      @render-ok="handleRenderOk"
      @row-click="handleTableRowClick" />

    <create-com
      v-if="showCreate"
      :config="createConfig"
      type="jxc_collection"
      @update="handleRefresh"
      @close="showCreate = false" />

    <j-x-c-full-screen-detail
      v-if="showDetail && rowId && detailType"
      :id="rowId"
      :type="detailType"
      @update="handleRefresh"
      @close="showDetail = false" />
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/16
 */
import {
  jxcFieldDetailOtherFieldListAPI,
  jxcFieldQueryListAPI
} from '@/api/jxc/field'

import TabTable from '../../../components/DetailTab/TabTable'
import CreateCom from '../../../components/Create/CreateCom'

import JxcTypes from '../../../jxcTypes'
import { mapGetters } from 'vuex'

export default {
  name: 'TabReturnMoney',
  components: {
    TabTable,
    CreateCom,
    JXCFullScreenDetail: () => import('../../../components/JXCFullScreenDetail')
  },
  inheritAttrs: false,
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tabTableRequest: {
        fieldList: [],
        listParams: {
          label: JxcTypes.jxc_collection.label,
          searchList: []
        },
        listRequest: jxcFieldQueryListAPI
      },
      showTable: false,

      rowId: '',
      detailType: '',
      showDetail: false,

      createConfig: {},
      showCreate: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    collectionReadAuth() {
      return this.jxc && this.jxc.collection && this.jxc.collection.read
    },
    collectionSaveAuth() {
      return this.jxc && this.jxc.collection && this.jxc.collection.save
    },
    listenerHook() {
      return {
        id: this.id,
        collectionReadAuth: this.collectionReadAuth
      }
    }
  },
  watch: {
    listenerHook: {
      handler(val) {
        this.showTable = false
        this.tabTableRequest.listParams.searchList = [
          {
            name: 'related_id',
            formType: 'text',
            type: 1,
            values: [this.id]
          },
          {
            name: 'collection_type',
            formType: 'text',
            type: 1,
            values: ['销售']
          },
          {
            name: 'state',
            formType: 'text',
            type: 2,
            values: [0]
          }
        ]
        this.getFieldList()
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getFieldList() {
      if (!this.collectionReadAuth) return
      jxcFieldDetailOtherFieldListAPI({
        label: JxcTypes.jxc_collection.label,
        otherLable: 10
      }).then(res => {
        const list = res.data || []
        list.forEach(item => {
          if (item.fieldName === 'collectionNo') {
            item.canVisit = true
            item.fixed = 'left'
          } else if (item.fieldName === 'relatedId') {
            item.formType = 'sale_cause'
            item.name = '销售订单'
          }
        })
        this.tabTableRequest.fieldList = list
        this.$nextTick(() => {
          this.showTable = true
        })
      }).catch(() => {
        this.showTable = false
      })
    },

    handleRenderOk(data) {
    },

    handleRefresh() {
      this.showTable = false
      this.getFieldList()
    },

    handleCreateCollection() {
      this.createConfig = {
        defaultValue: {
          collectionType: '销售',
          relatedId: {
            id: this.id,
            name: this.detailData.orderNumber
          },
          collectionObject: {
            id: this.detailData.customerName,
            name: this.detailData.customerNames
          },
          collectionAmount: this.detailData.salePrice
        },
        disabledField: ['collectionType', 'relatedId', 'collectionObject']
      }
      this.showCreate = true
    },

    handleTableRowClick(row, field) {
      console.log('clicked row', row, field)
      this.showDetail = false
      this.detailType = ''
      this.rowId = ''
      if (field === 'collectionNo') {
        this.detailType = 'jxc_collection'
        this.rowId = row.collectionNoteId
        this.showDetail = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../../styles/detailTab";
  .table-list {
    margin-top: 10px;
  }
</style>
